<template>
	<view class="order-content">
		<view class="" v-for="(item,index) in orderlist" :key="item.id" @click="goDetailedOrder(item.orderId,item)">
			<view class="orderitem">
				<view class="listtop">
					<view class="">
						{{item.order_time}}
					</view>
					<view class="buy">
						<template v-if="!item.state">
							<view>待买家支付</view>
						</template>
						<template v-else >
							<view style="color: #2b9836;"> 已支付</view>
						</template>
					</view>
				</view>
				<view class="all">
					<label class="radio">
						<radio value="r1" checked="true" />
					</label>
					<view class="content">
						<view class="corporation">
							潮悦`兴趣班
						</view>
						<view class="color">
							<view>
								收款方:
							</view>
							<view style="color: #fdb62e;">
								{{item.payee}}
							</view>
							
						</view>
						<view class="color">
							<view >
								订单号:
							</view>
							<view>
								{{item.orderId}}
							</view>
							
						</view>
						<view class="color">
							<view >
							商品名称:
							</view>
							<view >
								{{item.orderName}}
							</view>
							
						</view>
						<view class="color">
							<view >
								商品描述:
							</view>
							<view >
								{{item.orderDescription}}
							</view>
							
						</view>
						<view class="color">
							<view >
								交易金额:
							</view>
							<view style="color: #e13c2f;">
								¥{{item.orderSum}}.00
							</view>
							
						</view>
					</view>
					<!-- 右边价格 -->
					<view class="pnall">
						<view class="pnall-a" style="font-weight: 700;">
							
							<view class="evaluate" v-if="!item.state">
								不可评价
							</view>
							<view class="evaluate" v-else >
								
								<view class="" v-if="item.ismark === '1'" style="color: #489faa;">
									已经评价
								</view>
								<view  v-else @click="mackisShow(item)">
									评价
								</view>
							</view>
						</view>
					</view>
				
				</view>
			</view>
		
		
		
		</view>
		<view v-if="isShow" class="reserva-detal" @touchmove.stop.prevent="">
			<!-- 阴影框 -->
			<view class="pop-mask" @tap="hidePop()"></view>
			<view class="pop-box" :animation="animationData">
				<view class="pop-btitle">
					<view class="pop-btitle-dimg">
						<image class="pop-btitle-img" :src="this.detailmes.tec_img" mode=""></image>
					</view>
					<view class="pop-btitle-top">
						<view class="name">
							{{this.detailmes.tec_name}}
						</view>
						<view class="content">
							评价记录
						</view>
					</view>
				</view>
				
				<view class="pop-top">
					<view class="">
						<view class="pop-top-title">
							1.请对我的服务进行评价
						</view>
						<view class="pop-top-dimg" >
							<view class="" v-for="(item,index) in startlist" @click="getnum(item.id)" >
								<image class="pop-top-img" :src="item.img_1" mode=""></image>
							</view>
						</view>
					</view>
					
				</view>
				<view class="pop-line">
					<view class="">
						<view class="pop-top-title">
							2.对我服务的表扬或建议
						</view>
					</view>
					
					<view class="" >
						<textarea v-model="situation" class="sit-text" name="" id="" cols="30" rows="10">
							
						</textarea>
					</view>
				</view>
				
				<view class="pop-sub" @click="sendmes">
					确定
				</view>
			</view>
		</view>	
		

	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	export default {
		props: {
			orderlist: {
				type: Array,
				default: []
			}

		},
		data(){
			return{
				isShow: false,
				animationData: {},//动画过渡
				situation:"",
				detailmes:{},
				result:0,
				startlist:[
					{id:1,img_1:"/static/tabBar/evaluate.png"},
					{id:2,img_1:"/static/tabBar/evaluate.png"},
					{id:3,img_1:"/static/tabBar/evaluate.png"},
					{id:4,img_1:"/static/tabBar/evaluate.png"},
					{id:5,img_1:"/static/tabBar/evaluate.png"}],
				rules: {
						result: {
							rule: /^(?!0$)\d+$/,
							msg: "请对服务进行评价"
						},
						situation:{
							rule:/.{1,200}$/,
							msg: "请填写1~200字建议或表扬"
						}
					}
			}
		},
		methods:{
			hidePop() {
				var animation = uni.createAnimation({
					duration: 200,
				})
				animation.translateY(0).step()
				this.animationData = animation.export()
				setTimeout(() => {
					animation.translateY(600).step()
					this.isShow = false;
				}, 200)
			
			},
			getnum(index){
				this.result = index *2;
				this.startlist.forEach(obj=>{
					if(obj.id <= index){
					obj.img_1= "/static/tabBar/evaluated.png"
					}
					if(obj.id > index){
					obj.img_1= "/static/tabBar/evaluate.png"
					}
				})
				
			},
			//前往订单详情页面:
			goDetailedOrder(id,item){
				uni.navigateTo({
					url:`/pages/godetailedorder/godetailedorder?orderid=${id}&item=${JSON.stringify(item)}`
				})
			},
			//评价函数请求
			sendmes(){
				$http.request({
					url: "/sendmes",
					method:"POST",
					header:{
						token:true
					},
					data:{
						tel:this.detailmes.tec_tel,
						name:this.detailmes.tec_name,
						mark:this.result
					}
				}).then((res) => {
					console.log(res);
					uni.showToast({
						title: "评价完成",
						mask: true,
						duration: 2000,
						success() {
							this.isShow = false;
							
						}
					})
				}).catch(() => {
					uni.showToast({
						title: "评价失败",
						icon: "error",
						mask: true,
						duration: 2000,
						
					})
					
				})
			},
			mackisShow(it){
				this.isShow = true;
				
				this.detailmes = it
			}
		},
		computed:{
			
		}
	}
</script>

<style lang="scss">
	.order-content {
		.orderitem{
			
		
			margin-top: 20rpx;
		}
		.listtop {
			display: flex;
			padding: 10rpx 30rpx;
			justify-content: space-between;

		}

		.buy {
			color: #42B7FB;
		}

		.all {
			display: flex;
			justify-content: space-between;
			
			.radio {
				display: flex;
				align-items: center;
				width: 10%;
			}

			.content {
				width: 70%;
			
				.corporation{
					font-weight: 500;
					font-size: 32rpx;
					padding: 0 30rpx 15rpx 30rpx;
				}
				.color {
					font-size: 26rpx;
					padding: 5rpx 20rpx;
					color: #666666;
					display: -webkit-box;
					display: flex;
					justify-content: space-between;
					 -webkit-line-clamp: 1;
					 -webkit-box-orient: vertical;
					 overflow: hidden;
				}

				.free {
					color: #42B7FB;
				}
			}

			.pnall {
				display: flex;
				align-items: center;
				padding: 0 5rpx;
					.pri {
						
					}
					.evaluate{
						padding: 10rpx 0;
						color: #db2c47;
					}
				
				
			}

		}

	}
	.reserva-detal {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		
		.pop-mask {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .6);
		}
	
		.pop-box {
			background-color: #f6f6f6;
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			border-radius: 30rpx;
			overflow: hidden;
			.pop-btitle {
				padding: 10rpx 0 40rpx 0 ;
				background-color: #FFFFFF;
				.pop-btitle-dimg{
					display: flex;
					justify-content: center;
					.pop-btitle-img{
						width:200rpx;
						height: 200rpx;	
						border-radius: 120rpx;
						border: 2rpx solid #b4dad8;
					}
				
					
				}
				.pop-btitle-top{
					text-align: center;
					
					.name{
						color: #6f6f6f;
						font-size: 28rpx;
						margin-bottom: 10rpx;
					}
					.content{
						font-size: 24rpx;
						color: #bfbfbf;
					}
				}
			}
	
			.pop-top {
				background-color: #FFFFFF;
				margin-top: 10rpx;
				display: flex;
				.pop-top-dimg{
					display: flex;
				.pop-top-img{
					width: 40rpx;
					height: 40rpx;
					margin: 20rpx 10rpx;
				}
				}
			
			}
			.sit-text {
				width: 99%;
				height: 200rpx;
				border: 1rpx solid #15aeff;
			}
			.pop-line {
				
			}
	
			.pop-sub {
				z-index: 9999;
				line-height: 80rpx;
				background-color: #498DFB;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
</style>